// 1. 初始数据
const sliderData = [
  { url: '../images/slider01.jpg', title: '广州', color: 'rgb(100, 67, 68, .3)' },
  { url: '../images/slider02.jpg', title: '深圳', color: 'rgb(43, 35, 26, .3)' },
  { url: '../images/slider03.jpg', title: '东莞', color: 'rgb(36, 31, 33, .3)' },
  { url: '../images/slider04.jpg', title: '汕头', color: 'rgb(139, 98, 66, .3)' },
  { url: '../images/slider05.jpg', title: '佛山', color: 'rgb(67, 90, 92, .3)' },
  { url: '../images/slider06.jpg', title: '潮州', color: 'rgb(166, 131, 143, .3)' },
  { url: '../images/slider07.jpg', title: '珠海', color: 'rgb(53, 29, 25, .3)' },
  { url: '../images/slider08.jpg', title: '清远', color: 'rgb(99, 72, 114, .3)' },
]

let i = 0
//1.获取右侧按钮
const next = document.querySelector('.next')

const img = document.querySelector('.slider-wrapper img')
const footer = document.querySelector('.slider-footer')
const p = document.querySelector('.slider-footer p')

next.addEventListener('click', function () {
  i++

  i = i >= sliderData.length ? i = 0 : i

  common()
})

//2.获取左侧按钮
const prev = document.querySelector('.prev')
prev.addEventListener('click', function () {
  i--

  i = i < 0 ? i = 7 : i

  common()
})

//渲染页面
function common() {
  img.src = sliderData[i].url
  p.innerHTML = sliderData[i].title
  footer.style.backgroundColor = sliderData[i].color

  //删除小圆点
  document.querySelector('.slider-indicator .active').classList.remove('active')
  //给当前li添加小圆点
  document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}

//3.自动播放模块
let timeId = setInterval(function () {
  //利用js自动调用点击事件  click()  
  next.click()
}, 500)

//4.鼠标经过停止定时器
const slider = document.querySelector('.slider')
//注册事件
slider.addEventListener('mouseenter', function () {
  clearInterval(timeId)
})

//5.鼠标离开开启定时器  先关再开
//注册事件
slider.addEventListener('mouseleave', function () {
  //停止定时器
  clearInterval(timeId)
  //开启定时器
  timeId = setInterval(function () {
    //利用js自动调用点击事件  click()  
    next.click()
  }, 1500)
})




// 智慧旅游
// 广州、深圳、珠海、汕头、佛山、韶关、湛江、肇庆、江门、茂名、惠州、梅州、汕尾、河源、阳江、清远、东莞、中山、潮州、揭阳、云浮
const cityData = [
  { cityName: '广州', left: 580, top: 380, id: 1, url: '../nnImg/广州.png' },
  { cityName: '深圳', left: 660, top: 475, id: 2, url: '../nnImg/深圳.png' },
  { cityName: '珠海', left: 560, top: 540, id: 3, url: '../nnImg/珠海.png' },
  { cityName: '汕头', left: 980, top: 385, id: 4, url: '../nnImg/汕头.png' },
  { cityName: '佛山', left: 525, top: 420, id: 5, url: '../nnImg/佛山.png' },
  { cityName: '韶关', left: 620, top: 180, id: 6, url: '../nnImg/韶关.png' },
  { cityName: '湛江', left: 150, top: 680, id: 7, url: '../nnImg/湛江.png' },
  { cityName: '肇庆', left: 430, top: 360, id: 8, url: '../nnImg/肇庆.png' },
  { cityName: '江门', left: 470, top: 520, id: 9, url: '../nnImg/江门.png' },
  { cityName: '茂名', left: 250, top: 550, id: 10, url: '../nnImg/茂名.png' },
  { cityName: '惠州', left: 700, top: 400, id: 11, url: '../nnImg/惠州.png' },
  { cityName: '梅州', left: 900, top: 280, id: 12, url: '../nnImg/梅州.png' },
  { cityName: '汕尾', left: 850, top: 430, id: 13, url: '../nnImg/汕尾.png' },
  { cityName: '河源', left: 770, top: 300, id: 14, url: '../nnImg/河源.png' },
  { cityName: '阳江', left: 370, top: 550, id: 15, url: '../nnImg/阳江.png' },
  { cityName: '清远', left: 530, top: 280, id: 16, url: '../nnImg/清远.png' },
  { cityName: '东莞', left: 630, top: 430, id: 17, url: '../nnImg/东莞.png' },
  { cityName: '中山', left: 575, top: 480, id: 18, url: '../nnImg/中山.png' },
  { cityName: '潮州', left: 1020, top: 320, id: 19, url: '../nnImg/潮州.png' },
  { cityName: '揭阳', left: 930, top: 385, id: 20, url: '../nnImg/揭阳.png' },
  { cityName: '云浮', left: 370, top: 450, id: 21, url: '../nnImg/云浮.png' },
]
const map = document.querySelector('.map')

for (let i = 0; i < cityData.length; i++) {
  // 创建一个新的 a 元素
  var a = document.createElement('a');

  a.href = '#';
  a.className = 'city';
  a.id = cityData[i].id

  // link.className = cityData[i].classNAME;

  // `${cityData[i].left}px`
  a.style.left = `${cityData[i].left}px`;
  a.style.top = `${cityData[i].top}px`;


  // 创建一个新的 div 元素
  var City = document.createElement('div');

  City.className = 'cityName';
  City.innerHTML = cityData[i].cityName;
  // console.log(cityData[i].cityName);

  a.appendChild(City);
  map.appendChild(a)

  console.log(cityData[i].cityName);
}

// 盲盒旅行
const button = document.querySelector('.trip-blindbox .mine .button')
const loc_input = document.querySelector('.trip-blindbox .mine .my-location .location')
const departure_date = document.querySelector('.trip-blindbox .mine .departure .departure-date')
const today = new Date();
// 位置获得焦点时
loc_input.addEventListener('focus', function () {
  console.log('输入框获得焦点');
  loc_input.style.outline = 'none';
  loc_input.style.fontSize = '20px';
  loc_input.placeholder = ''
});

//酒店发送请求


//发送车票请求


//出发日期限定
departure_date.value = today.toISOString().split('T')[0];
departure_date.min = today.toISOString().split('T')[0];
// 最大日期
const maxday = new Date(today);
maxday.setDate(today.getDate() + 14);
departure_date.max = maxday.toISOString().split('T')[0];
//按钮开始停止标志
let isGo = true;
button.addEventListener('click', function () {
  if (isGo) {
    if (loc_input.value === '') {
      loc_input.style.outline = '3px solid red';
      loc_input.style.fontSize = '14px';
      loc_input.placeholder = '请输入你的出发地'
      return;
    }
    //检查填写是否为有效
    if (!check()) {
      loc_input.style.outline = '3px solid red';
      loc_input.style.fontSize = '12px';
      loc_input.value = ''
      loc_input.placeholder = '城市名有误,请重新输入'
      return;
    }
    run();
    button.textContent = '确定'
    button.style.backgroundColor = 'red'
    button.classList.add('determine')
  } else {
    clearInterval(timerId)
    button.textContent = '开始'
    button.style.backgroundColor = 'blue'
    button.classList.remove('determine')

    //发送Ajax请求
    const arrivalStation = document.querySelector('.trip-blindbox .map-box .city-name').innerHTML
    const departureStation = document.querySelector('.trip-blindbox .mine .my-location .location').value;
    const departureTime = document.querySelector('.trip-blindbox .mine .departure .departure-date').value;
    const fees = document.querySelector('.trip-blindbox .mine .fees .moneys .money').innerHTML;

    const requestData = {
      departureStation: departureStation,
      arrivalStation: arrivalStation,
      departureTime: departureTime,
    }

    if (fees === '120'){//只预订了车票
      // 发送 Ajax 请求
      $.ajax({
        url: `/blindBox/ticket`,
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(requestData),
        success: function (response) {
          // 处理响应
          if (response.success === 1) {
            alert("预订成功")
          }else if (response.success === 0){
            alert(response.msg);
          }
        },
        error: function () {
          alert("请求失败");
        }
      })
    }else if (fees === '200'){//只预订了酒店 requestData 目的地 还有出发时间
      // 发送 Ajax 请求

        $.ajax({
          url: `/blindBox/hotel?hotelAddress=${arrivalStation}&stayTime=${departureTime}`,
          type: "GET",
          contentType: "application/json",
          success: function (response) {
            // 处理响应
            if (response.success === 1) {
              alert("预订成功")
            }else if (response.success === 0){
              alert(response.msg);
            }
          },
          error: function () {
            alert("请求失败");
          }
        })

    }else  if (fees === '320'){
      $.ajax({
        url: `/blindBox/ticket`,
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(requestData),
        success: function (response) {
          // 处理响应
          if (response.success === 1) {
            alert("预订成功")
            $.ajax({
              url: `/blindBox/hotel?hotelAddress=${arrivalStation}&stayTime=${departureTime}`,
              type: "GET",
              contentType: "application/json",
              success: function (response) {
                // 处理响应
                if (response.success === 1) {
                  alert("预订成功")
                }else if (response.success === 0){
                  alert(response.msg);
                }
              },
              error: function () {
                alert("请求失败");
              }
            })
          }else if (response.success === 0){
            alert(response.msg);
          }
        },
        error: function () {
          alert("请求失败");
        }
      })

    }
  }
  isGo = !isGo
  console.log('111');
})



//检查输入是否为有效值
function check() {
  let loc_city = loc_input.value;
  for (let i = 0; i < cityData.length; i++) {
    if (cityData[i].cityName === loc_city || cityData[i].cityName + '市' == loc_city) {
      return true;
    }
  }
  return false;
}




// 预定选择
const hook1 = document.querySelector('.trip-blindbox .mine .choice .hook-train')
const hook2 = document.querySelector('.trip-blindbox .mine .choice .hook-hotel')
const money = document.querySelector('.trip-blindbox .mine .fees .moneys .money')
let isSelection1 = false
let isSelection2 = false

//统计费用函数
function countFees() {
  if (isSelection1 && isSelection2) {
    money.innerHTML = '320'
  } else if (isSelection1 && !isSelection2) {
    money.innerHTML = '120'
  } else if (!isSelection1 && isSelection2) {
    money.innerHTML = '200'
  } else {
    money.innerHTML = '0'
  }
}
// 钩子一
hook1.addEventListener('click', function () {
  isSelection1 = !isSelection1
  if (isSelection1) {
    hook1.style.color = 'skyblue';
  } else {
    hook1.style.color = 'rgb(193, 199, 205)';
  }
  console.log('222');
  countFees();
})
// 钩子二
hook2.addEventListener('click', function () {
  isSelection2 = !isSelection2
  if (isSelection2) {
    hook2.style.color = 'skyblue';
  } else {
    hook2.style.color = 'rgb(193, 199, 205)';
  }

  countFees();
})
// 定时器的全局变量
let timerId = 0
// 随机号要全局变量
let random = 0
let city_name = document.querySelector('.trip-blindbox .map-box .city-name')
let map_img = document.querySelector('.trip-blindbox .map-box .map-img')
// 运行跑动
function run() {
  timerId = setInterval(function () {
    // 随机数
    random = parseInt(Math.random() * cityData.length)
    // console.log(arr[random])
    city_name.innerHTML = cityData[random].cityName
    map_img.src = cityData[random].url
  }, 35)
}

window.addEventListener("DOMContentLoaded", function () {
  // checkLogin()

  let city = document.querySelectorAll('.city')

  for (let i = 0; i<city.length;i++){
    city[i].addEventListener('click',function (){
      console.log(city[i].id)
      // 发送 Ajax 请求
      $.ajax({
        url: `/index/${city[i].id}`,
        type: "GET",
        contentType: "application/json",
        // data: JSON.stringify(requestData),
        success: function (response) {
          // 处理响应
          if (response.success === 1) {
            // alert("成功");
            // 进行跳转或其他操作
            localStorage.setItem('cityData', JSON.stringify(response.data));
            window.location.href = '../html/city.html?cid='+city[i].id
          } else {
            alert("查询失败");
          }
        },
        error: function () {
          alert("请求失败");
        }
      })
    })
  }
})